<template>
  <div class="app-container">
    <el-button type="primary" icon="el-icon-plus" @click="addguide" v-if="isShowAdd">添加限制规则</el-button>
    <el-form :ref="formName" :model="formFieldsData" :rules="rules" v-show="!isShowAdd">
      <el-form-item label="每个企业免费浏览数量（个）：" prop="num">
        <span v-if='company_browser&&!isEdit'>{{company_browser.browser_number}}</span>
        <el-input v-else v-model="company_browser.browser_number" type='number' style="width: 200px" autocomplete="off" clearable placeholder='请输入免费浏览数量'/>
      </el-form-item>
      <p class="tips">*超过免费数量后的收费标准</p>
      <div class="flex_box form_table">
        <div>
          <p class="label">多查看个数</p>
          <p class="label">收费金额（折扣价）</p>
          <p class="label">收费金额（原价）</p>
        </div>
        <div class="flex_box" v-if='company_browser&&!isEdit'>
          <div class="flex1" v-for="(item,index) in company_browser.charge_arr" :key='index'>
            <el-form-item class="el_form_item">
              {{item.day}}
            </el-form-item>
            <el-form-item class="el_form_item">
              {{item.discount_price}}
            </el-form-item>
            <el-form-item class="el_form_item">
              {{item.price}}
            </el-form-item>
          </div>
        </div>
        <div class="flex_box" v-else>
          <div class="flex1" v-for="(item,index) in company_browser.charge_arr" :key='index'>
            <el-form-item class="el_form_item">
              <el-input v-model="item.day" clearable class="ipt" />
            </el-form-item>
            <el-form-item class="el_form_item">
              <el-input v-model="item.discount_price" clearable class="ipt" />
            </el-form-item>
            <el-form-item class="el_form_item">
              <el-input v-model="item.price" clearable class="ipt" />
            </el-form-item>
          </div>
        </div>
        <p class="el-icon-circle-plus-outline" @click="add" v-if='!company_browser|| isEdit'></p>
      </div>
      <p class="tips">注：“0”表示不限个数</p>
      <el-form-item label="是否启用：" prop="status">
        <span v-if="company_browser&&!isEdit">{{company_browser.is_use==1?'已启用':'已关闭'}}</span>
        <el-switch v-else v-model="formFieldsData.status" active-text="已启用" inactive-text="已关闭"></el-switch>
      </el-form-item>
      <el-form-item v-if="!company_browser||isEdit">
        <el-button @click="handlCancel">取消</el-button>
        <el-button @click="handlReset">重 置</el-button>
        <el-button type="primary" @click="handleSure">确 定</el-button>
      </el-form-item>
      <el-form-item v-if="company_browser&&!isEdit">
        <el-button @click="handlEdit">修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      url:'/promotion/admin/companyBrowserConfig/company_browser',
      company_browser:{
        is_use:0,
        browser_number:0,
        charge_arr:[]
      },// 浏览限制数据
      isShowAdd:false, // 是否添加过企业浏览限制
      isEdit:'',// 是否显示编辑
      formName:'redRule',
      formLabelWidth:'100px',
      formFieldsData:{
        num:0,
        status:''
      },
      numArr: [
        {days:'',price:'',activityPrice:''},
        {days:'',price:'',activityPrice:''},
        {days:'',price:'',activityPrice:''}
      ],
      // 验证规则
      rules: {
        browser_number: [
          { required: true, message: '请输入免费浏览数量', trigger: 'blur' }
        ]
      },
    }
  },
  methods: {
    getList() {
      this.$http.get(this.url).then(response => {
        console.log(response)
        if (response.code == 10000) {
          if (response.data) {
            this.company_browser = response.data.company_browser
            this.company_browser.charge_arr = JSON.parse(this.company_browser.charge_arr)
            this.isShowAdd = false
            this.isEdit = false
          } else {
            this.isShowAdd = true
          }
        }
      })
    },
    //添加限制规则
    addguide() {
      this.isShowAdd = true
    },
    //  添加标准
    add() {
      this.company_browser.push({day:'',price:'',discount_price:''})
    },
    // 修改
    handlEdit() {
      this.isEdit = true
    },
    // 取消修改
    handlCancel() {
      this.isEdit = false
      this.getList()
    },
    // 重置
    handlReset() {
      this.company_browser.is_use = 0
      this.company_browser.browser_number = 0
      this.company_browser.charge_arr = []
    },
    // 确定
    handleSure() {
      if (this.company_browser.charge_arr.length == 0) {
        this.$message.error('收费标准不能为空')
        return
      }
      let num = 0
      this.company_browser.charge_arr.forEach(res=>{
        if (res.day == ''||res.discount_price == ''||res.price == '') {
          num++
        }
      })
      if (num > 0) {
        this.$message.error('收费标准不能为空')
        return
      }
      let param = {}
      for (let key in this.company_browser) {
        param[key] = this.company_browser[key]
      }
      param.charge_arr = JSON.stringify(param.charge_arr)
      this.$http.post('/promotion/admin/companyBrowserConfig', param).then(response => {
        if (response.code == 10000) {
          this.getList()
        } else {
          this.$message.error(response.message)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .tips{
    font-size: 14px;
    color:#999;
    margin-bottom: 10px;
  }
  .form_table{
    margin-bottom: 20px;
  }
  .label{
    width: 140px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color:#777;
    padding-left: 4px;
    border:1px solid #eee;
    margin:0 -1px -1px 0;
  }
  .el_form_item{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin:0;
    padding:0 10px;
    border:1px solid #eee;
    margin:0 -1px -1px 0;
  }
  .ipt{
    width: 80px;
  }
  .el-icon-circle-plus-outline{
    width: 100px;
    height: 147px;
    line-height: 147px;
    text-align: center;
    border:1px solid #eee;
    box-sizing: border-box;
    font-size: 36px;
    color:#777;
    cursor: pointer;
  }
</style>